<template>
    <div class="app-container">
        <div>
            <el-container>
                <!--顶部header区域-->


                <el-header>
                    <el-menu
                            :default-active="activeIndex2"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-menu-item index="1">处理中心</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">我的工作台</template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                            <el-menu-item index="2-3">选项3</el-menu-item>
                            <el-submenu index="2-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="2-4-1">选项1</el-menu-item>
                                <el-menu-item index="2-4-2">选项2</el-menu-item>
                                <el-menu-item index="2-4-3">选项3</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="3" disabled>消息中心</el-menu-item>
                        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a>
                        </el-menu-item>
                        <el-dropdown trigger="hover">
                            <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar"/>天天看得见</span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>我的消息</el-dropdown-item>
                                <el-dropdown-item>设置</el-dropdown-item>
                                <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-menu>


                </el-header>

                <!--中间body区域-->
                <el-container>
                    <!--中间侧边栏区域-->
                    <el-aside width="1">
                        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen"
                                 @close="handleClose" :collapse="isCollapse">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span slot="title">导航一</span>
                                </template>
                                <el-menu-item-group>
                                    <router-link to="/Navigation1/sos-back-list">
                                        <el-menu-item index="1-1">SOS</el-menu-item>
                                    </router-link>
                                    <router-link to="/Navigation1/task-back-list">
                                        <el-menu-item index="1-2">任务</el-menu-item>
                                    </router-link>
                                    <router-link to="/Navigation1/user-back-list/">
                                        <el-menu-item index="1-3">用户</el-menu-item>
                                    </router-link>
                                    <router-link to="Navigation1/task-back-list/">
                                        <el-menu-item index="1-3">账单</el-menu-item>
                                    </router-link>
                                </el-menu-item-group>
                                <el-submenu index="1-4">
                                    <span slot="title">选项4</span>
                                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">导航二</span>
                            </el-menu-item>
                            <el-menu-item index="3" disabled>
                                <i class="el-icon-document"></i>
                                <span slot="title">导航三</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-setting"></i>
                                <span slot="title">导航四</span>
                            </el-menu-item>
                        </el-menu>
                    </el-aside>
                    <!--中间内容区域-->
                    <el-main>
                        <el-row>
                            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                                <el-radio-button :label="false">展开</el-radio-button>
                                <el-radio-button :label="true">收起</el-radio-button>
                            </el-radio-group>
                        </el-row>
                        <el-row>
                            <router-view></router-view>
                        </el-row>
                    </el-main>
                </el-container>
            </el-container>
            <!--顶部footer区域-->
            <nav class="mui-bar mui-bar-tab">
                <router-link class="mui-tab-item" to="/home">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页</span>
                </router-link>
                <router-link class="mui-tab-item" to="/member">
                    <span class="mui-icon mui-icon-contact"></span>
                    <span class="mui-tab-label">会员</span>
                </router-link>
                <router-link class="mui-tab-item" to="/shopcar">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart">
					<span class="mui-badge">0</span>
				</span>
                    <span class="mui-tab-label">购物车</span>
                </router-link>
                <router-link class="mui-tab-item" to="/search">
                    <span class="mui-icon mui-icon-search"></span>
                    <span class="mui-tab-label">搜索</span>
                </router-link>
            </nav>
            <!--<h1>这是 App 组件</h1>-->
        </div>
    </div>
</template>

<script>
    import {setCookie, getCookie, delCookie} from '../../assets/js/cookie.js'
    export default {
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                isCollapse: false,//侧边栏展开收缩
                name: '',//登录状态存储
                sysUserAvatar:"../../../static/img/photo.jpg"//用户头像路径
            }
        },
        mounted() {
            /*页面挂载获取保存的cookie值，渲染到页面上*/
            let uname = getCookie('username')
            this.name = uname
            alert(this.name)
            /*如果cookie不存在，则跳转到登录页*/
            if (uname == "") {
                this.$router.push('/')
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            quit() {
                /*删除cookie退出登录*/
                delCookie('username')
            }
        }
    }
</script>


<style lang="scss" scoped>
    .app-container {
        /*padding-top: 40px;*/
    }
    .el-header {
        padding: 0;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    header{
        .el-dropdown{
            line-height: 60px;
            color: #ffffff;
            float: right;
            margin-right: 50px;
            img{
                height: 40px;
                width: 40px;
                border-radius: 20px;
                vertical-align: middle;
            }
        }
    }
</style>
